<style lang=less >
	@import '../assets/public.less';
	@import './forget_pwd.less';
	@import './mian.less';
</style>
<template>
	<div>
		<HeaDer></HeaDer>
		<div id="main">
			<div class="forget_pwd_main">
				<!--手机号验证-->
				<div class="validation_mobile" v-show="whitchShow == 1">
					<div class="header_forget">
						<h2 class="welcome_reg">{{$t("forgetpwd.titleOne[0]")}}</h2><!-- 重置登录密码 -->
					</div>
					<div class="form_warp">
						<div class="content_warp">
							<el-form :label-position="labelPosition" :model="userData" status-icon :rules="rules2" ref="userData" label-width="100px" class="demo-ruleForm">
								<el-form-item :label='$t("forgetpwd.titleOne[1]")' prop="mobile"><!-- 账号 -->
									<el-input v-model.number="userData.mobile" auto-complete="off"></el-input>
								</el-form-item>
								<div class="primary_btn">
									<el-button type="primary" @click="submitmobile()" :loading="loading">{{$t("forgetpwd.titleThree[3]")}}</el-button><!-- 提交 -->
								</div>
							</el-form>
						</div>
						<div class="prompt">
							<div class="warp_prompt">
								<!-- <p>重设登录密码后24小时禁止交易</p> -->
							</div>
						</div>
					</div>
				</div>
				<!--安全验证-->
				<div class="valdation_code" v-show="whitchShow == 2">
					<div class="header_forget">
						<h2 class="welcome_reg">{{$t("forgetpwd.titleTwo[0]")}}</h2><!-- 安全验证 -->
					</div>
					<div class="form_warp">
						<div class="content_warp">
							<el-form :label-position="labelPosition" :model="userData" status-icon :rules="rules2" ref="userData" label-width="100px" class="demo-ruleForm">
								<el-form-item :label='$t("forgetpwd.titleOne[1]")' prop="mobile"><!-- 账号 -->
									<el-input v-model.number="userData.mobile" auto-complete="" disabled></el-input>
								</el-form-item>
								<!--验证码-->
							<div class="imgCode">
								<div class="inp_warp">
									<el-form-item :label='$t("register.list[1]")' prop=""><!-- 图片验证码 -->
										<el-input type="text" auto-complete="off" v-model="verify"></el-input>
									</el-form-item>
								</div>
								<div class="img_warp" id="img_warp">
									<div id="v_container" style="width: 210px;height: 45px;"></div>
								</div>
							</div>
							<!--验证码 end-->
								
								<div class="valdation_code_warp">
									<el-form-item :label='$t("forgetpwd.titleTwo[2]")' prop="code"><!-- 短信验证码 -->
										<el-input v-model.number="userData.code" auto-complete="off"></el-input>
									</el-form-item>
									<div class="btn_code" @click="get_code()">
										<el-input type="button" :value='btnCode.time' :disabled='btnCode.disabled'></el-input>
									</div>
								</div>
								<div class="primary_btn">
									<el-button type="primary" @click="submitCode('userData')" :loading="loading">{{$t("forgetpwd.titleThree[3]")}}</el-button><!-- 提交 -->
								</div>
							</el-form>
						</div>
						<div class="prompt">
							<div class="warp_prompt">
								<!-- <p>重设登录密码后24小时禁止交易</p> -->
							</div>
						</div>
					</div>
				</div>
				<!--重设密码-->
				<div class="valdation_pwd" v-show="whitchShow == 3">
					<div class="header_forget">
						<h2 class="welcome_reg">{{$t("forgetpwd.titleOne[0]")}}</h2><!-- 重置登录密码 -->
					</div>
					<div class="form_warp">
						<div class="content_warp">
							<el-form :label-position="labelPosition" :model="userData" status-icon :rules="rules2" ref="userData" label-width="100px" class="demo-ruleForm">
								<el-form-item :label='$t("forgetpwd.titleThree[1]")' prop="opwd"><!-- 登录密码 -->
									<el-input type="password" v-model="userData.opwd" auto-complete="off"></el-input>
								</el-form-item>
								<el-form-item :label='$t("forgetpwd.titleThree[2]")' prop="opwd1"><!-- 确认密码 -->
									<el-input type="password" v-model="userData.opwd1" auto-complete="off"></el-input>
								</el-form-item>

								<div class="primary_btn">
									<el-button type="primary" @click="submitPwd('userData')" :loading="loading">{{$t("forgetpwd.titleThree[3]")}}</el-button><!-- 提交 -->
								</div>
							</el-form>
						</div>
						<div class="prompt">
							<div class="warp_prompt">
								<!-- <p>重设登录密码后24小时禁止交易</p> -->
							</div>
						</div>
					</div>

				</div>
			</div>
		</div>
		<FooTer></FooTer>
	</div>
</template>

<script>
	import Header1 from "./main/header.vue";
	import Footer1 from "./main/footer.vue";
	import Verify from 'vue2-verify'
	
	export default {
		data() {
			var _this = this;
			var mobile = (rule, value, callback) => {
				if(!_this.$public.checkMobile(value)) {
					return callback(new Error(this.$t("Verification.phone[0]")));//请输入有效的手机号
				} else {
					callback();
				}

			};
			var code = (rule, value, callback) => {
				if(!_this.$public.code(_this.userData.code)) {
					return callback(new Error(this.$t("Verification.Code[1]")));//验证码格式有误
				} else {
					callback();
				}
			};
			var opwd = (rule, value, callback) => {
				if(!_this.$public.pwd(value)) {
					callback(new Error(this.$t("Verification.Password[0]")));//请输入有效的密码
				} else {
					callback();
				}
			};
			var opwd1 = (rule, value, callback) => {
				if(!_this.$public.pwd(value)) {
					callback(new Error(this.$t("Verification.Password[0]")));//请输入有效的密码
				} else if(value !== this.userData.opwd) {
					callback(new Error(this.$t("Verification.Password[2]")));//两次输入密码不一致
				} else {
					callback();
				}
			};
			return {
				labelPosition: 'top', //插件自带
				verifyCode:'', //图片验证码
				verify:'',
				userData: {
					mobile: '', //手机号
					code: '', //短信验证码
					opwd: '', //密码1
					opwd1: '' //密码2
				},
				rules2: {
					mobile: [{
						validator: mobile,
						trigger: 'blur'
					}],
					code: [{
						validator: code,
						trigger: 'blur'
					}],
					opwd: [{
						validator: opwd,
						trigger: 'blur'
					}],
					opwd1: [{
						validator: opwd1,
						trigger: 'blur'
					}]
				},

				btnCode: {
					time: this.$t("changetpwd.list[4]"), //倒计时
					disabled: false
				},
				loading: false, //防止表单重复提交标志位
				whitchShow: 1, //哪一步显示
			}
		},
		methods: {
			//手机号验证提交函数
			submitmobile() {
				var _this = this;
				if(!_this.$public.checkMobile(_this.userData.mobile)) {
					_this.$public.msg(_this.$t("Verification.phone[0]"), 'warning', _this);//请输入有效的手机号
				} else {
					setTimeout(function() {
						_this.whitchShow = 2;
					}, 300)
				}
			},
			//验证码验证
			submitCode() {
				var _this = this;
				//验证验证码的正确性
				if(!this.verifyCode.validate(this.verify)){
					_this.$public.msg(_this.$t("login.submitForm[1]"), 'warning', _this);//图片验证码有误
					return false;
				}else if(!_this.$public.code(_this.userData.code)) {
					_this.$public.msg(_this.$t("Verification.Code[1]"), 'warning', _this);//验证码格式有误
				} else {
					_this.whitchShow = 3;
				}
			},
			submitPwd() {
				var _this = this;
				if(!_this.$public.pwd(_this.userData.opwd)) {
					_this.$public.msg(_this.$t("Verification.Password[0]"), 'warning', _this);//密码格式有误
					return false;

				} else if(_this.userData.opwd !== _this.userData.opwd) {
					_this.$public.msg(_this.$t("Verification.Password[2]"), 'warning', _this);//两次密码不一致
					return false;
				}
				_this.loading = true;
				_this.$http.post(_this.$http.reset_opwd, _this.userData).then(function(response) {
					_this.loading = false;
					if(response.data.status == "200") {
						_this.$public.msg(response.data.msg, 'success', _this);
						_this.$public.go('login', 10, _this);
						_this.loading = false;
					} else {
						_this.$public.msg(response.data.msg, 'warning', _this);
					}
				}).catch(function(error) {});
			},
			//获取验证码执行函数
			get_code() {
				var _this = this;
				//获取验证码
				_this.btnCode.disabled = true;
				_this.$http.post(_this.$http.send_sms, {
					mobile: _this.userData.mobile,
					type: 2

				}).then(function(response) {
					if(response.data.status == "200") {
						_this.$public.setTime(_this); //倒计时函数封装
					} else {
						_this.btnCode.disabled = false;						
						_this.$public.msg(response.data.msg, 'warning', _this);
					}
				}).catch(function(error) {});

			}
		},
		components: {
			"HeaDer":Header1,
		    "FooTer":Footer1,
		},
		mounted:function(){
			if(this.$cookies.get('changeBg') == 'night'||!this.$cookies.get('changeBg')) {
				$('#main').removeClass('mainb');
				$('#main').addClass('mainy');
			} else {
				$('#main').removeClass('mainy');
				$('#main').addClass('mainb');
			}
			this.$public.codeImg('v_container');
			this.verifyCode = new GVerify("v_container");
		},
		created: function() {
			
		},
	}
</script>

<style scoped>
.el-message-box {
		width: 800px !important;
	}
	
	.imgCode {
		overflow: hidden;
	}
	
	.inp_warp {
		float: left;
		width: 55%;
		margin-right: 2%;
	}
	
	.img_warp {
		float: left;
		width: 40%;
		margin-top: 22px;
	}
</style>